<template>
  <div class="app">
    <div class="close">
      <div class="iconfont iconicon-test"></div>
    </div>
    <div class="newlogo">
      <div class="iconfont iconnew"></div>
    </div>
    <div class="input">
      <AuthInput
        type="text"
        placeholder="用户名/手机号码"
        :rules="/^\d{5,6}$/"
        @input="getPhone"
        msg="请输入手机号码"
      ></AuthInput>
    </div>
    <div class="input">
      <AuthInput
        type="password"
        :rules="/^\d{3,6}$/"
        placeholder="密码"
        @input="getpwd"
        msg="请输入密码"
      ></AuthInput>
    </div>
    <AuthBtn
      value="登录123"
      @Myclick="getContent"
    ></AuthBtn>
  </div>
</template>

<script>
import AuthInput from '../../components/AuthInput'
import AuthBtn from '../../components/AuthBtn'
export default {
  data () {
    return {
      Phone: '',
      password: ''
    }
  },
  components: {
    AuthInput,
    AuthBtn
  },
  methods: {
    getPhone (data) {
      this.Phone = data
    },
    getpwd (data) {
      this.password = data
    },
    // 点击按钮触发的事件
    getContent (e) {
      if (this.Phone.trim().length === 0 || this.password.trim().length === 0) {
        return
      }
      this.$axios({
        url: '/login',
        method: 'POST',
        data: {
          username: this.Phone,
          password: this.password
        }
      }).then(res => {
        if (res.data.data) {
          window.localStorage.setItem('userId', res.data.data.user.id)
          window.localStorage.setItem('token', res.data.data.token)
          this.$router.push({
            name: 'Mycenter',
            params: { userId: res.data.data.user.id }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.app {
  height: 100vh;
}
.iconicon-test {
  margin: 20/360 * 100vw;
  font-size: 28/360 * 100vw;
  color: #323232;
}
.newlogo {
  text-align: center;
  .iconnew {
    font-size: 126/360 * 100vw;
    color: #d81e06;
  }
}
.input {
  padding: 0 30/360 * 100vw;
}
</style>
